
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper的切换</title>
    <link rel="stylesheet" href="./static/style/swiper.min.css">
    <link rel="stylesheet" href="css/certify.css">
    <script src="./static/js/swiper.min.js"></script>
    <style>
        @charset "utf-8";
/* CSS Document */
body{
	margin:0;}
#certify {
	position: relative;
	width: 1200px;
	margin: 0 auto
}

#certify .swiper-container {
	width: 100%;
}

#certify  .swiper-slide {
	width: 900px;
	background: #fff;
    position: relative;
}
#certify  .swiper-slide img{
	display:block;
    width: 100%;
}
#certify  .swiper-slide p {
	padding: 12px 0;
	text-align: center;
	color: #636363;
	font-size: 20px;
	color: #fff;
	margin: 0;
    position: absolute;
    bottom: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	visibility: hidden;
}

#certify .swiper-pagination {
	width: 100%;
	bottom: 20px;
}

#certify .swiper-slide-active p{
	visibility: visible;
}

#certify .swiper-button-prev {
	left: -30px;
	width: 200px;
	height: 100%;
	background-position: 0 0;
	background-size: 100%;
	top: 0;
}

#certify .swiper-button-prev::after {
	display: none;
}
#certify .swiper-button-next::after {
	display: none;
}

#certify .swiper-button-next {
	right: -30px;
	width: 200px;
	height: 100%;
	background-position: 0 -93px;
	background-size: 100%;
	top: 0;
}


    </style>
</head>
<body>
<div id="certify">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<a><img src="https://www.jq22.com/demo/swiperlbt201811010021/img/b1.png" /><p>非常难得又值钱的认证证书</p></a>
			</div>
			<div class="swiper-slide">
				<img src="https://www.jq22.com/demo/swiperlbt201811010021/img/b2.png" /><p>深圳市优秀互联网企业认定证书</p>
			</div>
			<div class="swiper-slide">
				<img src="https://www.jq22.com/demo/swiperlbt201811010021/img/b3.png" /><p>质量管理体系认证荣誉证书</p>
			</div>
			<div class="swiper-slide">
				<img src="https://www.jq22.com/demo/swiperlbt201811010021/img/b4.png" /><p>计算机软件著作权登记证书</p>
			</div>
			<div class="swiper-slide">
				<img src="https://www.jq22.com/demo/swiperlbt201811010021/img/b5.png" /><p>增值电信业务经营许可证</p>
			</div>
			<div class="swiper-slide">
				<img src="https://www.jq22.com/demo/swiperlbt201811010021/img/b5.png" /><p>增值电信业务经营许可证</p>
			</div>
		</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

<script>
certifySwiper = new Swiper('#certify .swiper-container', {
	watchSlidesProgress: true,
	slidesPerView: 'auto',
	centeredSlides: true,
	loop: true,
	loopedSlides: 5,
	autoplay: {
		delay: 2500,
		disableOnInteraction: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: false,
	on: {
		progress: function(progress) {
			for (i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i);
				var slideProgress = this.slides[i].progress;
				modify = 1;
				if (Math.abs(slideProgress) > 1) {
					modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
				}
				translate = slideProgress * modify * 260 + 'px';
				scale = 1 - Math.abs(slideProgress) / 5;
				zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
				slide.transform('translateX(' + translate + ') scale(' + scale + ')');
				slide.css('zIndex', zIndex);
				slide.css('opacity', 1);
				if (Math.abs(slideProgress) > 3) {
					slide.css('opacity', 0);
				}
			}
		},
		setTransition: function(transition) {
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);
			}

		}
	}

})
</script>
</body>
</html>